<template>
    <div class="profile-baseinfo-container">
        <div class="p-b-c-item">
            <div class="p-b-c-filed">姓名</div> ：
            <input type="text" :value="$store.state.view.profile.user.name" disabled style="margin-right: 16px">
        </div>
        <div class="p-b-c-item">
            <div class="p-b-c-filed">部门</div> ：
            <input type="text" :value="$store.state.view.profile.user.dept" disabled style="margin-right: 16px">
        </div>
        <div class="p-b-c-item">
            <div class="p-b-c-filed">职位</div> ：
            <input type="text" :value="$store.state.view.profile.user.group" disabled style="margin-right: 16px">
        </div>
        <div class="p-b-c-item">
            <div class="p-b-c-filed">院系</div> ：
            <Select v-model="$store.state.user.college" style="width: 219px" :disabled="dis !=3" @on-change="changeCollege">
                <Option v-for="(item, index) in $store.state.info.colleges" :value="item" :key="item + index">{{ item }}</Option>
            </Select>
            <Icon v-if="$store.state.user.sid === $store.state.view.profile.user.sid" @click="edit(3, $store.state.view.profile.user.college)" class="p-b-c-icon" type="ios-create-outline" />
        </div>
        <div class="p-b-c-item">
            <div class="p-b-c-filed">学号</div> ：
            <input type="text" :value="$store.state.view.profile.user.sid" :disabled="dis !=4">
            <Icon v-if="$store.state.user.sid === $store.state.view.profile.user.sid" @click="edit(4, $store.state.view.profile.user.sid)" class="p-b-c-icon" type="ios-create-outline" />
        </div>
        <div class="p-b-c-item">
            <div class="p-b-c-filed">生日</div> ：
            <input type="text" :value="$store.state.view.profile.user.birth" :disabled="dis !=5">
            <Icon v-if="$store.state.user.sid === $store.state.view.profile.user.sid" @click="edit(5, $store.state.view.profile.user.birth)" class="p-b-c-icon" type="ios-create-outline" />
        </div>
        <div class="p-b-c-item">
            <div class="p-b-c-filed">QQ</div> ：
            <input type="text" :value="$store.state.view.profile.user.qq" :disabled="dis !=6">
            <Icon v-if="$store.state.user.sid === $store.state.view.profile.user.sid" @click="edit(6, $store.state.view.profile.user.qq)" class="p-b-c-icon" type="ios-create-outline" />
        </div>
        <div class="p-b-c-item">
            <div class="p-b-c-filed">电话</div> ：
            <input type="text" :value="$store.state.view.profile.user.tel" :disabled="dis !=7">
            <Icon v-if="$store.state.user.sid === $store.state.view.profile.user.sid" @click="edit(7, $store.state.view.profile.user.tel)" class="p-b-c-icon" type="ios-create-outline" />
        </div>
        <div class="p-b-c-item">
            <div class="p-b-c-filed">执勤时间</div> ：
            <input type="text" :value="getDuty()" disabled style="margin-right: 16px">
        </div>
    </div>
</template>

<script>

import student_request from "@/axios/student";
import local_script from "@prof/js/util";
import $ from "jquery";

export default {
    data() {
        return {
            dis: -1,
            context: ""
        }
    },
    mounted() {
        let that = this;
        $(".p-b-c-item input").blur(() => {
            that.dis = -1;
            that.update($(this).parent().index(), $(this).val());
        })
    },
    methods: {
        async update(index, value) {
            let user = this.$store.state.view.profile.user;
            let sid = this.$store.state.user.sid;
            switch(index) {
                case 4: user.sid = value; this.$store.state.user.sid = value; break;
                case 5: user.birth = value; break;
                case 6: user.qq = value; break;
                case 7: user.tel = value; break;
            }
            if ((index != 4 && this.$store.state.user.sid != user.sid) || this.context === value) {
                return;
            }
            let res = await student_request.axiosAlterInfo(index, value, sid);
            if (res === undefined && index === 4) {
                this.$store.state.user.sid = this.context;
                user.sid = this.context;
            }
        },
        getDuty() {
            return local_script.parseDuty(this.$store.state.view.profile.user.duty);
        },
        edit(u, v) {
            this.dis = u;
            this.context = v;
        },
        changeCollege(v) {
            student_request.axiosAlterInfo(3, v, this.$store.state.user.sid);
            this.dis = -1;
        }
    }
}
</script>

<style lang="scss">
@import "@prof/scss/info-index.scss";
</style>